<template>
  <el-form ref="form" :rules="rules" :model="goodsInfo" label-width="100px">
    <el-form-item label="商品名称" prop="goods_name">
      <el-input v-model.trim="goodsInfo.goods_name" />
    </el-form-item>
    <el-form-item label="商品价格" prop="goods_price">
      <el-input v-model.number="goodsInfo.goods_price" />
    </el-form-item>
    <el-form-item label="商品重量" prop="goods_weight">
      <el-input v-model.number="goodsInfo.goods_weight" />
    </el-form-item>
    <el-form-item label="商品数量" prop="goods_number">
      <el-input v-model.number="goodsInfo.goods_number" />
    </el-form-item>
    <el-form-item label="商品分类" prop="goods_cat">
      <el-cascader
        v-model="goodsInfo.goods_cat"
        placeholder="请选择"
        :options="proCategory"
        :props="{ expandTrigger: 'hover',value:'cat_id' ,label:'cat_name'}"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { getProductCategory } from '@/api/commodityManagement'
export default {
  name: 'GoodsInfo',
  props: {
    goodsInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rules: {
        goods_name: [
          { required: true, message: '请填写商品名称', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请填写商品重量', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请填写商品价格', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请填写商品数量', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '请选择商品分类', trigger: ['change', 'blur'] }
        ]
      },
      proCategory: []
    }
  },
  created() {
    this.loadProductCategory()
  },
  methods: {
    async loadProductCategory() {
      const res = await getProductCategory()
      this.proCategory = res
    },
    formValidation() {
      return this.$refs.form.validate()
    }
  }
}
</script>

<style scoped>

</style>
